<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>我的订单</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="./js/swiper.min.css"/>
</head>
<style>
    .discover_top {
        width: 100%;
        line-height: 50px;
        background: linear-gradient(to right, #FFCF00, #FFBE00);
        text-align: center;
        font-size: 16px;
        color: #333;
    }

    .swiper_top {
        background: #fff;
        height: 30px;
        padding: 0 10px;
    }

    .swiper-slide {
        color: #444;
    }

    .swiper-slide-active {
        color: #333;
        font-weight: 700;
        font-size: 16px;
    }

    .swiper-slide-active::after {
        content: "";
        position: absolute;
        bottom: 5px;
        width: 50%;
        left: 0;
        height: 2px;
        border-radius: 1px;
        background: #FFBE00;
    }

    .outer {
        padding: 0 15px;
    }

    .discover_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .discover_content a {
        width: 48%;
        height: 200px;
        margin-top: 10px;
        background: #fff;
        border-radius: 5px;
        font-size: 0;
        padding-bottom: 10px;
    }

    .discover_content .card img {
        width: 100%;
    }

    .goods_title {
        font-size: 14px;
        color: #333;
        padding: 0 10px 10px;
    }

    .inner_title {
        font-size: 14px;
        color: #333;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .price {
        font-size: 12px;
        color: #FFBE00;
        font-weight: 700;
    }

    .order_list {
        font-size: 14px;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 44px;
        background: #fff;
    }

    .active {
        position: relative;
    }

    .active::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 3px;
        border-radius: 1px;
        background: #6670ff;
        left: 0;
    }

    .topSearch {
        height: 44px;
        background: #6670ff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .topInput {
        width: 300px;
        height: 25px;
        padding-left: 30px;
        border-radius: 5px;
        background: url("./images/search.png") 7px center no-repeat #fff;
        background-size: 15px 15px;
        border: none;
    }

    .topInput:focus {
        border: none;
        outline: none;
    }

    .order_group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        margin: 10px 0;
        padding: 10px 20px;
        border: 1px solid #EBEDEF;
    }

    .order_item {
        display: flex;
        align-items: center;
        font-size: 14px;
    }

    .order_item img {
        width: 60px;
        height: 60px;
        margin-right: 15px;
    }

    .order_item_content {
        display: flex;
        flex-direction: column;
    }

    .shop_name {
        font-weight: bold;
        font-size: 15px;
        color: #666;
    }

    .order_price {
        color: #ff0000;
        font-size: 18px;
    }
</style>

<body ontouchstart>
<div class="search_top">
    <a href="javascript:history.back(-1)"><img src="./images/xiangzuo.png" alt="" class="back"></a>
    <input type="text" placeholder="请输入订单号进行搜索" class="searchInput orderNum">
    <span class="search_btn">搜索</span>
</div>
<div style="height: 44px;"></div>
<div id="orderList">
    <!-- <a href="./order_detail.html">
         <div class="order_group">
             <div class="order_item">
                 <img src="images/sc.png" alt="">
                 <div class="order_item_content">
                     <span class="shop_name">商家名称</span>
                     <label>支付时间：2020-06-09</label>
                     <label>优惠：10积分=1元</label>
                 </div>
             </div>
             <div class="order_price">￥50</div>
         </div>
     </a>-->

</div>
</body>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="js/swipe.js"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="wxJs/utils/storage.js"></script>
<script src="wxJs/utils/contain.js"></script>
<script>

    function listEach(list, active) {
        $(list).click(function () {
            var index = $(list).index(this)
            for (var i = 0; i < $(list).length; i++) {
                $(list).eq(i).removeClass(active)
                $(list).eq(index).addClass(active)
            }
        })
    }

    listEach(".order_list p", "active")

    var userId = GetQueryString("userId")
    if (!userId) {
        window.history.back(-1);
    }

    $.post(getWeiContextPath() + "/wx/order/queryMyOrderList", {wxUserId: userId}, function (res) {

        var _orderList = $('#orderList').empty()
        $.each(res, function (i, obj) {

            _orderList.append('<a href="./order_detail.html?orderId=' + obj.id + '">\n' +
                '        <div class="order_group">\n' +
                '            <div class="order_item">\n' +
                '                <img src="' + getImgSrc(obj.imgPath) + '" alt="">\n' +
                '                <div class="order_item_content">\n' +
                '                    <span class="shop_name">' + obj.shopName + '</span>\n' +
                '                    <label>支付时间：' + obj.createTime + '</label>\n' +
                '                    <label>返还积分: '+obj.returnJifen+'</label>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="order_price">￥' + obj.realityPrice + '</div>\n' +
                '        </div>\n' +
                '    </a>')
        })

        var mySwiper = new Swiper('.swiper-container', {
            slidesPerView: 6
        })
    })

    $('.search_btn').on('click', function () {
        var orderNum = $('.orderNum').val()

        if (!orderNum) {
            $.toast("请输入单号", "forbidden")
            return false;
        }

        $.post(getWeiContextPath() + "/wx/order/queryListByNum", {orderNum: orderNum,wxUserId: userId}, function (res) {
            console.log(res)
            var _orderList = $('#orderList').empty()
            $.each(res, function (i, obj) {
                _orderList.append('<a href="./order_detail.html?orderId=' + obj.id + '">\n' +
                    '        <div class="order_group">\n' +
                    '            <div class="order_item">\n' +
                    '                <img src="' + getImgSrc(obj.imgPath) + '" alt="">\n' +
                    '                <div class="order_item_content">\n' +
                    '                    <span class="shop_name">' + obj.shopName + '</span>\n' +
                    '                    <label>支付时间：' + obj.createTime + '</label>\n' +
                    '                    <label>返还积分: '+obj.returnJifen+'</label>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="order_price">￥' + obj.realityPrice + '</div>\n' +
                    '        </div>\n' +
                    '    </a>')
            })
        })
    })

</script>

</html>